<template>
    <div>

         <el-button
            class="disbutton"
            type="primary"
            @click="openFullScreen"
            v-loading.fullscreen.lock="fullscreenLoading">
            指令方式
        </el-button>

        <div class="accounthead">
                <img src="../../assets/asawhole.png" alt="">
                <span>任务详情</span>
        </div>

        <div class="bigbox">
            <div class="detailhead">
                <div class="detailhead1">
                    <span class="titlenum">{{this.detailList.id}}</span>
                    <span class="status">{{this.detailList.state | rowstate}}</span>

                    <el-button style="folat: right;" class="downloadBtn" type="primary" icon="el-icon-download" @click="downloadBtn" v-if="this.detailList.state == 4 || this.detailList.state == 5">下载</el-button>
                </div>
                <div class="detailhead2">
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <div>公司名称：{{this.detailList.companyName}}</div>
                                <div>搜索类型：{{this.yqname}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <div>任务创建时间：{{this.detailList.insertTime}}</div>
                                <div>任务结束时间：{{this.detailList.endTime}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <div>状态：{{this.detailList.state | rowstate}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>

             <div class="subject">
                <div class="subjecttitle">
                    <span>主体</span>
                    <span class="subjecttitle2">请输入主体（一行一个）</span>
                </div>
                <textarea v-html="zuti" readonly="readonly"></textarea>
            </div>

             <div class="keyword">
               <div class="keywordhead">
                  <span>关键词</span>
                  <!-- <span class="right">选择其他模板</span> -->
               </div>

               <div class="keywordbody">
                  <div class="keywordbodyT">
                     <span>常用模板</span>
                     <span class="key15">{{templateList.name}}</span>
                  </div>
                  <div class="keywordbodyB">
                     <span>更新于{{templateList.updateTime}}</span>
                  </div>
               </div>

               
            </div>

            <div class="result" @click="toResultList">
                <span class="resultleft">爬取结果</span>
                <span class="resultright">{{recordnum}}条记录</span>
            </div>

            <div class="foot">
                <div class="footbtn">
                    <el-button class="button" @click="golast">返回</el-button>
                </div>
            </div>
        
        </div>

    </div>
    
</template>

<script>
import {getTaskDetail,getResultList,getTempltateUpdateList} from '@/api'
export default {
    created () {
        this.initTaskDetail() 
    },
    data () {
      return {
         recordnum: 0,
         detailList: [],  // 任务列表返回成功 el-icon-download
         yqname: '',
         zuti: '',
         templateId: 0,
         templateList: [],
         fullscreenLoading: true
      }
   },
   filters: {
        rowstate(state) {
            if(state === 1 ) {
                return '已提交,等待爬取'
            } else if(state === 2 ) {
                return '爬取中'
            } else if(state === 3) {
                return '已爬取,正在处理结果'
            } else if(state === 4) {
                return '已完成'
            }else if(state === 5) {
                return '已完成'
            }   else {
                return '批量创建的任务提交失败'
            }
        }  
    },
    methods: {
        openFullScreen() {
        // this.fullscreenLoading = true;
        // setTimeout(() => {
        //   this.fullscreenLoading = false;
        // }, 2000);
      },
        golast() {
            this.$router.go(-1)
        },
        initTaskDetail() {
            
            // ckj 获取传过来的id
            // console.log(this.$route.query.id)
            let id = this.$route.query.id

            getTaskDetail(id)
            .then(res => {
                // console.log(res)
                this.detailList = res.data
                this.yqname = this.detailList.module.name
                this.templateId = res.data.templateId
                this.zuti = res.data.entity
                this.zuti = this.zuti.replace(/\+/g, '&#10;')
                //  this.zuti = this.zuti.trim().split(/+\/n/)
                // console.log(this.templateId)
                // console.log(this.detailList.module)
                // console.log(this.detailList.module.name)
                 getTempltateUpdateList(this.templateId)
                .then(res => {
                    // console.log(12345)
                    // console.log(res)
                    this.templateList = res.data
                    // console.log(this.templateList)
                })
            })
            // 获取模板消息
            // 获取特定任务的结果列表
            let obj = {
                tid: id,
                pageNum: 1,
                pageSize: 10, 
            }
            getResultList(obj)
            .then(res => {
                // console.log(res)
                // console.log(res.data.total)
                this.recordnum = res.data.total
                this.fullscreenLoading = false
                // this.zuti = res.data.list[0].entity
                // console.log(this.zuti)
            })
        },
        // 用id获取任务结果的xls下载
        downloadBtn() {
            let id = this.$route.query.id
            // console.log(id)
            // console.log("http://www.varyuan.top/task/download/"+id+"/xls")
            // console.log(window)
            window.open("http://dy.6soft.com:8080/task/download/"+id+"/xlsx") 
        },
        // ckj 跳转到结果列表
        toResultList() {
            // console.log(12345)
            let id = this.$route.query.id
            this.$router.push({path: '/resultList', query: {id: id}})
        }
    }

}
</script>

<style lang="scss" scoped>
    .downloadBtn {
        float: right;
        margin-top: 64px;
    }
    .disbutton {
        // display: none;
        position: relative;
        left: -9999px;
    }
    .accounthead {
      background-color: #f9f6f9;
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        img {
            margin-left: 20px;
        }
        span {
            position: absolute;
            bottom: -9px;
            left: 60px;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }

    .result{
        cursor: pointer;
        margin-top: 20px;
        width: 100%;
        height: 60px;
        font-size: 20px;
        text-align: left;
        background-color: #fff;
        border-bottom: 1px solid #cccccc;
        line-height: 60px;
        .resultright {
            float: right;
        }
    }

    .bigbox {
        background-color: #fff;
        padding-left: 161px;
        padding-right: 161px;
    }
    .detailhead {
        .detailhead1 {
            height: 180px;
            line-height: 180px;
            text-align: left;
            .titlenum {
                font-size: 100px;
                color: #5677FC;
            }
            .status{
                font-size:16px;
                color:rgba(194,66,87,1);
            }
        }
        .detailhead2 {
            padding-bottom: 10px;
            text-align: left;
            font-size: 15px;
            line-height: 30px;
            border-bottom: 1px solid #BFBFBF;
        }
    }

    .subject {
       text-align: left;
       .subjecttitle {
          font-size: 20px;
          .subjecttitle2 {
              font-size: 13px;
          }
       }
       textarea {
           box-sizing: border-box;
          height: 102px;
          width: 100%;
          font-family:"Microsoft YaHei";
          font-size: 14px;
          outline: none;
          cursor: default;
          background-color: #eee;
       }
    }

    .keyword {
       position: relative;
       width: 100%;
       font-size: 18px;
       box-sizing: border-box;
       .keywordhead {
          text-align: left;
          .right {
             cursor: pointer;
             color: #B25262;
             font-size: 13px;
             float: right;
          }
       }
       .keywordbody {
           box-sizing: border-box;
          border: 1px solid #c9c9c9;
          border-radius: 4px;
          height: 128px;
          width: 100%;
          padding: 0 20px;
          .keywordbodyT {
             height: 50%;
            text-align: left;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
            .key15 {
               color: #4F8AC1;
               font-size: 15px;
            }
          }
          .keywordbodyB {
             color: #7E7E7E;
             font-size: 15px;
             text-align: left;
          }
       }
       .keywordfoot {
         //  position: absolute;
         //  right: 0;
         width: 1232px;
         margin-top: 90px; 
      }
    }

    .foot {
         height: 165px;
        width: 100%;
    }

    .footbtn {
        position: relative;
        height: 165px;
        width: 100%;
        float: right;
        .button {
            position: absolute;
            right: 0;
            bottom: 45px;
        }
    }

</style>

